<template>
  <div class="toast-mask flex-hvc display-flex" v-show="show">
    <div class="toast" >
      {{content}}
    </div>
  </div>

</template>
<style lang="scss" scoped>
  .display-flex{display: flex;display: -moz-flex;display: -o-flex;display: -webkit-flex}
  .flex-hvc{align-items: center;justify-content: center;}
  .toast-mask{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9;
    pointer-events : none;
    .toast {
      background: rgba(0,0,0,0.6);
      padding: 0.2rem 0.5rem;
      border-radius: 2px;
      text-align: center;
      color: #fff;
      font-size: 0.3rem;
      max-width: 10rem;
    }
  }
</style>
